Angular-এ পাইপস হলো একটি ফিচার, যা ডেটা ট্রান্সফর্ম বা ফরম্যাট করতে ব্যবহৃত হয়। পাইপস ব্যবহার করে আপনি ডেটার উপস্থাপন পরিবর্তন করতে পারেন, যেমন তারিখ, সংখ্যা, বা টেক্সট ফরম্যাট। Angular-এ অনেক বিল্ট-ইন পাইপস রয়েছে যা সহজেই ডেটা ফরম্যাটিং বা পরিবর্তন করতে সাহায্য করে।

বিল্ট-ইন পাইপস

1. DatePipe

DatePipe ব্যবহার করে আপনি একটি তারিখের ফরম্যাট পরিবর্তন করতে পারেন। এটি Date অবজেক্টকে একটি নির্দিষ্ট ফরম্যাটে কনভার্ট করে।

উদাহরণ:

<p>{{ currentDate | date }}</p> <!-- Default format -->
<p>{{ currentDate | date:'short' }}</p> <!-- Short date format -->
<p>{{ currentDate | date:'yyyy-MM-dd' }}</p> <!-- Custom date format -->

এখানে, currentDate হলো একটি JavaScript Date Object, এবং date পাইপ দিয়ে আপনি তারিখের প্রদর্শন কাস্টমাইজ করতে পারেন। আপনি বিভিন্ন ফরম্যাট ব্যবহার করতে পারেন, যেমন:

• 'short', 'medium', 'long'
• 'yyyy-MM-dd', 'MM/dd/yyyy'

2. UpperCasePipe

UpperCasePipe ব্যবহার করে আপনি টেক্সটের সমস্ত অক্ষরকে বড় হাতের (uppercase) অক্ষরে পরিবর্তন করতে পারেন।

উদাহরণ:

<p>{{ 'hello world' | uppercase }}</p>

এখানে "hello world" টেক্সটটি UpperCasePipe দ্বারা 'HELLO WORLD' এ রূপান্তরিত হবে।

3. LowerCasePipe

LowerCasePipe ব্যবহার করে আপনি টেক্সটের সমস্ত অক্ষরকে ছোট হাতের (lowercase) অক্ষরে পরিবর্তন করতে পারেন।

উদাহরণ:

<p>{{ 'HELLO WORLD' | lowercase }}</p>

এখানে "HELLO WORLD" টেক্সটটি LowerCasePipe দ্বারা 'hello world' এ রূপান্তরিত হবে।

4. CurrencyPipe

CurrencyPipe ব্যবহার করে আপনি একটি সংখ্যাকে কারেন্সি (মুদ্রা) ফরম্যাটে রূপান্তর করতে পারেন। এটি সাধারণত টাকা বা মূল্য প্রদর্শনের জন্য ব্যবহৃত হয়।

উদাহরণ:

<p>{{ 1234.56 | currency }}</p>
<p>{{ 1234.56 | currency:'EUR' }}</p> <!-- Euro currency -->

এখানে প্রথম উদাহরণে ডিফল্ট মুদ্রা ব্যবহার হবে (যেমন: USD), এবং দ্বিতীয় উদাহরণে ইউরো (EUR) মুদ্রা হিসেবে রূপান্তরিত হবে।

5. DecimalPipe

DecimalPipe ব্যবহার করে আপনি একটি দশমিক সংখ্যাকে নির্দিষ্ট দশমিক স্থানে রূপান্তর করতে পারেন।

উদাহরণ:

<p>{{ 1234.5678 | number:'1.2-2' }}</p>

এখানে, 1.2-2 মানে হচ্ছে সংখ্যাটির অন্তত একটি ডিজিট থাকবে এবং দুটি দশমিক স্থান পর্যন্ত রূপান্তরিত হবে। এই কনফিগারেশনে 1234.5678 → 1,234.57 রূপে প্রদর্শিত হবে।

6. PercentPipe

PercentPipe ব্যবহার করে আপনি একটি দশমিক সংখ্যাকে শতাংশের (percentage) ফরম্যাটে রূপান্তর করতে পারেন।

উদাহরণ:

<p>{{ 0.25 | percent }}</p>

এখানে 0.25 সংখ্যাটি ২৫% হিসেবে রূপান্তরিত হবে এবং এটি '25%' হিসাবে প্রদর্শিত হবে।

7. JsonPipe

JsonPipe ব্যবহার করে আপনি একটি অবজেক্টকে JSON স্ট্রিং হিসেবে রূপান্তর করতে পারেন। এটি ডিবাগিং বা লগিংয়ের জন্য খুবই উপকারী।

উদাহরণ:

<p>{{ { name: 'John', age: 30 } | json }}</p>

এখানে, { name: 'John', age: 30 } অবজেক্টটি JSON স্ট্রিং হিসেবে রূপান্তরিত হয়ে প্রদর্শিত হবে।

8. SlicePipe

SlicePipe ব্যবহার করে আপনি একটি অ্যারে বা স্ট্রিং থেকে একটি নির্দিষ্ট অংশ কেটে নিতে পারেন।

উদাহরণ:

<p>{{ 'Angular is awesome' | slice:0:7 }}</p>

এখানে, slice:0:7 নির্দেশ করছে যে "Angular is awesome" স্ট্রিংয়ের প্রথম ৭টি অক্ষর (যেমন: 'Angular') প্রদর্শিত হবে।

9. AsyncPipe

AsyncPipe ব্যবহার করে আপনি আসিঙ্ক্রোনাস ডেটাকে অ্যাঞ্জুলারের টেম্পলেটে সাবস্ক্রাইব করতে পারেন। এটি সাধারণত Observable বা Promise ডেটা হ্যান্ডল করতে ব্যবহৃত হয়।

উদাহরণ:

<p>{{ observableData | async }}</p>

এখানে observableData একটি Observable এবং AsyncPipe এর মাধ্যমে এটি সাবস্ক্রাইব করা হচ্ছে। এটি ডেটার পরিবর্তন হলে টেম্পলেটে স্বয়ংক্রিয়ভাবে আপডেট হবে।

পাইপসের ব্যবহারের সুবিধা

• সহজ ডেটা ফরম্যাটিং: পাইপস আপনাকে সহজভাবে ডেটা ফরম্যাট করতে সাহায্য করে, যেমন তারিখ, সংখ্যা বা টেক্সট।
• কাস্টমাইজেবল: Angular-এ বিল্ট-ইন পাইপস ছাড়াও আপনি আপনার নিজের কাস্টম পাইপ তৈরি করতে পারেন।
• প্রদর্শন ইন্ডিপেনডেন্ট: পাইপসের মাধ্যমে আপনি কম্পোনেন্টের ডেটা প্রদর্শন পরিবর্তন করতে পারেন, যা UI এবং ডেটা ম্যানিপুলেশনকে আলাদা করে রাখে।

কাস্টম পাইপ তৈরি

আপনি Angular-এ কাস্টম পাইপও তৈরি করতে পারেন, যা আপনার প্রয়োজন অনুযায়ী ডেটা ট্রান্সফর্ম করবে।

কাস্টম পাইপ উদাহরণ:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverseString'
})
export class ReverseStringPipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

এখানে reverseString পাইপটি স্ট্রিংটিকে উল্টো করে রূপান্তর করবে। এর পর আপনি এটি টেম্পলেটে ব্যবহার করতে পারেন:

<p>{{ 'hello' | reverseString }}</p> <!-- Output: 'olleh' -->

উপসংহার

Angular এর বিল্ট-ইন পাইপস ব্যবহার করে আপনি সহজেই ডেটা ফরম্যাটিং, ট্রান্সফর্ম এবং প্রদর্শন পরিবর্তন করতে পারেন। DatePipe, UpperCasePipe, CurrencyPipe ইত্যাদি পাইপস টেম্পলেটের মধ্যে ডেটা সহজে এবং কাস্টম ফরম্যাটে প্রদর্শন করতে সাহায্য করে। এছাড়াও, কাস্টম পাইপ তৈরি করে আপনি আপনার অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় ডেটা ট্রান্সফর্মেশন কাস্টমাইজ করতে পারেন।